<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件处理函数</title>
    <script src="../../utils/vue.js"></script>
</head>
<body>
    <!-- 使用v-on监听dom事件，并在触发时运行JavaScript代码： -->
    <div id="app">
        <p>
            商品总库存为：{{ sum }}
            <button v-on:click="sum++">加一</button>
            <button v-on:click="sum--">减一</button>
        </p>
        <!-- 当业务逻辑复杂，可接收一个需要调用的方法名称 -->
        <p>
            <input v-model="name" placeholder="请输入姓名：">
            <button v-on:click="greet">点击</button>
            <p v-if="events">{{ events }}</p>
        </p>
        <!-- 除了直接绑定方法，也可以在内联JavaScript中直接调用方法 -->
        <p>
            <input v-model="name" placeholder="请输入姓名：">
            <button v-on:click="nameList('Y To')">点击</button>
        </p>
        <!-- 在内联语句中访问原始dom事件，需用特殊变量$event将它传入方法 -->
        <p>
            <button v-on:click="useEvent('msg', $event)">点击</button>
            <textarea v-model="es" v-bind:style="style"> {{ es }}</textarea>
        </p>
        <p>

        </p>
    </div>
    <script>
        // resize:属性，禁止设置宽高
        var app = new Vue({
            el: "#app",
            data: {
                sum: 100,
                name: "",
                events: "",
                es: "",
                style: {
                    width: "300px",
                    height: "300px",
                    fontSize: "30px",
                    color: "red",
                    resize: "none"
                }
            },
            methods: {
                greet: function (event) {
                    // this指向vue实例
                    alert("hello, " + this.name + "!");
                    // event是原生dom事件
                    if (event) {
                        this.events = event.target;
                        alert(event.target.tagName);
                    }
                },
                nameList: function (name) {
                    this.name = name;
                },
                useEvent: function (msg, event) {
                    if (event) {
                        event.preventDefault();
                    }
                    for (let e in event) {
                        this.es += e + "\t";
                    }
                }
            }
        });
        app.greet();    // 可使用JavaScript直接调用方法
    </script>
</body>
</html>